<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>发布订阅模式</title>
    <!-- 
        发布订阅模式
        发布者(1)            店员
            | 
         事件中心         书店事件中心 
            |
        订阅者(n)     购书者1   购书者2

       书店事件中心   功能： 接收多个订阅者不同类型的订阅操作
          {
              类型1: [执行的操作1,执行的操作2]
              类型2: [执行的操作11,执行的操作22]
          }

     -->
</head>
<body>
    <button>订阅者1</button>
    <button>订阅者2</button>
    <script>
        const btn1 = document.querySelectorAll('button')[0]
        const btn2 = document.querySelectorAll('button')[1]
        btn1.addEventListener('click',function(){
            console.log('买的新书三国演义到了');
        })
        btn2.addEventListener('click',function(){
            console.log('买的新书西游记到了');
        })

        class EventCenter{
            constructor(){
                //{ type: [()=>{},()=>{}] }
                this.subs = {} // 事件中心对象
            }
            addEvent(type,even){
                this.subs[type] = this.subs[type] || []
                this.subs[type].push(even)
            }
            emitEvent(type){
                if(this.subs[type]){
                    this.subs[type].forEach(even=>{
                        even()
                    })
                }
            }
        }

        let eventCenter = new EventCenter()
        eventCenter.addEvent('buybook',function(){
            console.log('买的新书三国演义到了');
        })
        eventCenter.addEvent('buybook',function(){
            console.log('买的新书西游记到了');
        })

        eventCenter.emitEvent('buybook')


    </script>
</body>
</html>